<nz-layout>
    <nz-content>
        <nz-divider nzText='模板驱动式表单验证'>模板驱动式表单验证</nz-divider>
        <form nz-form #userForm='ngForm' autocomplete='off'>
            <nz-form-item [ngClass]="{'has-error': name.invalid&&(name.dirty||name.touched)}">
                <nz-form-label nzSpan="3" nz-col>姓名</nz-form-label>
                <nz-form-control nzSpan="8" nz-col>
                    <input nz-input text='type' name='name' required minlength='2' maxlength='10' appNameValidator [(ngModel)]="user.name" #name='ngModel'>
                    <div class='text-danger' *ngIf="name.invalid&&(name.dirty||name.touched)">
                        <span *ngIf="name.errors.required">姓名不能为空</span>
                        <span *ngIf="name.errors.minlength">不能少于2个字</span>
                        <span *ngIf="name.errors.nameValidator">只能输入英文、数字、下划线</span>
                    </div>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label nzSpan="3" nz-col>密码</nz-form-label>
                <nz-form-control nzSpan="8" nz-col>
                    <input nz-input text='password' name='password' required minlength='6' appConfirmPassword [(ngModel)]="user.password" #password='ngModel'>
                    <div class="text-danger" *ngIf="password.invalid&&(password.touched||password.dirty)">
                        <span *ngIf="password.errors.required">密码不能为空</span>
                        <span *ngIf="password.errors.minlength">不能少于6位</span>
                        <span *ngIf="password.errors.confirmPasswordValidator">两次密码输入不一致</span>
                    </div>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label nzSpan="3" nz-col>重复密码</nz-form-label>
                <nz-form-control nzSpan="8" nz-col>
                    <input nz-input text='password' name='confirmPassword' required minlength='6' appConfirmPassword [(ngModel)]="user.confirmPassword" #confirmPassword='ngModel'>
                    <div class="text-danger" *ngIf="confirmPassword.invalid&&(confirmPassword.touched||confirmPassword.dirty)">
                        <span *ngIf="confirmPassword.errors.required">密码不能为空</span>
                        <span *ngIf="confirmPassword.errors.minlength">不能少于6位</span>
                        <span *ngIf="confirmPassword.errors.confirmPasswordValidator">两次密码输入不一致</span>
                    </div>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label nzSpan="3" nz-col [nzNoColon]=true></nz-form-label>
                <nz-form-control nzSpan="6" nz-col>
                    <button nz-button [disabled]='userForm.invalid' class='login-form-button' [nzType]="'primary'">登陆</button>
                </nz-form-control>
            </nz-form-item>
        </form>
    </nz-content>
</nz-layout>
